<template>
  <div class="box">
    <div class="top">
      <van-nav-bar
          title="题库选择"
          left-arrow
          @click-left="onClickLeft"
      />
      <van-search v-model="value" placeholder="请输入题库名称搜索" @search="search"/>
    </div>



    <div class="list">
      <div class="left">
        <van-sidebar v-model="activeKey" >
          <van-sidebar-item
            style="background-color: #FAFAFA"
              :title="item.name"
                v-for="(item,index) in list" :key="item.id"
              @click="change(item.id)"
          />
        </van-sidebar>
      </div>
      <div class="right">
          <div>
            <van-tag color="#F5F5F5"
                     text-color="#000"
               class="tag"
              v-for="(item,index) in lists" :key="item.id"
            >{{ item.name }}</van-tag>
          </div>
      </div>
    </div>


  </div>
</template>

<script>
import { classify,right,search} from '@/utils/http'
export default {
  data(){
    return{
      value:'',
      activeKey: 0,
      list:[],
      lists:[],
    }
  },
  mounted() {
    this.add()
     this.change()
  },
  methods: {
    onClickLeft() {
      this.$router.push('/practices')
    },
    async add(){
      let res=await classify()
      //console.log(res)
      this.list=res
    },
    change(id){
        //console.log(id)
        right({id: id}).then(res=>{
          //console.log(res)
          this.lists=res
        })
    },
    search(value){
      search(value).then(res=>{
          //console.log(res)
        this.$router.push({path:'/points',query:{
            res:res,
            name:this.value
          }})
      })
    }
  },
}
</script>

<style scoped lang="scss">
.top{
  width: 100%;
  height:92px;
}
.list{
  border-top:1px solid #F0F2F5;
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.right{
  div{
    margin-top: 20px;
    margin-left: 20px;
    .tag{
      margin-left: 20px;
    }
  }
}
.left{
  height: 590px;
  background-color: #FAFAFA;
}

</style>